<template>
  <div class="wrap">
    <div id="histogram" class="histogramContainer"></div>
    <span class="time">2018年4月10日</span>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      echart: null,
    };
  },
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      this.$nextTick(() => {
        this.echart = echarts.init(document.getElementById("histogram"));
        this.echart.setOption(this.option());
      });
    },
    option() {
      let option = {
        grid: {
          top: 70,
          bottom: 40,
          left: 60,
          right: 30,
          borderWidth: 1,
        },
        title: {
          show: true,
          text: "停车场今日区域消费图",
          textStyle: {
            color: "#2f2f2f",
            fontStyle: "normal",
            fontWeight: "bold",
            fontFamily: "sans-serif",
            fontSize: 18,
            lineHeight: 42,
            verticalAlign: "center",
          },
          textAlign: "text",
          textVerticalAlign: "auto",
          padding: 0,
          left: "5%",
          top: "3%",
        },
        xAxis: {
          type: "category",
          data: ["芙蓉区", "开福区", "关心区", "雨花区", "岳麓区", "其他地区"],
          axisLabel: {
            color: "#7c7c7c",
            fontsize: 12,
            interval: 0,
          },
          axisLine: {
            show: false,
            onZero: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgb(204,204,204)",
            },
            texrstyle: {
              fontsize: 12,
            },
          },
        },
        yAxis: {
          type: "value",
          max: 11061,
          min: 0,
          interval: 2766,
          axisLine: {
            show: false,
            onZero: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgb(204,204,204)",
            },
          },
        },
        series: [
          {
            type: "bar",
            data: [11061, 10368, 9904, 9719, 7342, 350],
            interval: 11061,
            max: 11061,
            min: 0,
            label: {
              show: true,
              clickable: true,
              position: "top",
              color: "#999999",
            },
            barWidth: 16,
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = [
                    ["#275891", "#fefefe"],
                    ["#2b448d", "#fefefe"],
                    ["#3253af", "#fefefe"],
                    ["#3c63d5", "#fefefe"],
                    ["#3c6bf5", "#fefefe"],
                    ["#789af9", "#fefefe"],
                  ];
                  let index = params.dataIndex;
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex % colorList.length;
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorList[index][0],
                    },
                    {
                      offset: 1,
                      color: colorList[index][1],
                    },
                  ]);
                },
              },
            },
          },
        ],
      };
      return option;
    },
  },
};
</script>

<style lang="less" scoped>
.histogramContainer {
  width: 378px;
  height: 280px;
  border-radius: 3px;
  margin-left: 20px;
  box-shadow: 0 3px 16px 0px #bbb8ca;
  background-color: #fff;
  // position: relative;
}
.wrap {
  position: relative;
}
.time {
  color: rgba(104, 98, 185, 0.8);
  position: absolute;
  right: 26px;
  top: 30px;
  font-size: 14px;
  line-height: 16px;
}
</style>